<template>
	<view class="padding">
		<view class="padding-sm bg-white radius">
			<view v-if="props.header" class="flex justify-between">
				<view>
					{{props.title}}
				</view>
				<view class="text-center">
					<view class="cu-tag bg-blue round" @click="handleRight">
						{{props.desc}}</view>
				</view>
			</view>
			<view class="grid" :class="['col-'+props.count,menuBorder?'sm-border':'',menuCard?'card-menu ':'']">
				<view class="margin-0 flex justify-center padding-xs" v-for="(item,index) in list" :key="index"
					 @click="handleSelect(item)">
					<view class="text-center">
						<view class="text-size-38 text-black text-bold" :class="'text-'+item.color+' '+iconStyle">{{item.value}}</view>
						<view class="text-black text-size-26">{{item.name}}({{item.unit}})</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const emit = defineEmits(['action']);
	const props = defineProps({
		menuBorder: {
			type: [Boolean, String],
			default: false
		},
		menuCard: {
			type: [Boolean, String],
			default: false
		},
		menuArrow: {
			type: [Boolean, String],
			default: false
		},
		header: {
			type: [Boolean, String],
			default: true
		},
		count:{
			type: [Number, String],
			default: 4
		},
		iconStyle:{
			type:String,
			default: "size-42"
		},
		title:{
			type:String,
			default: ""
		},
		desc:{
			type:String,
			default: "今日"
		},
		list: {
			default:()=>{
				return [
					{
						name:'',
						value:0,
						unit:''
					}
				]
			}
		}
	})
	const handleSelect = (e) => {
		emit('action', e)
	}
	const handleRight=(e)=>{
		emit('action', e)
	}
</script>

<style>
	.grid{
		border-radius: 12rpx;
	}
	.radius{
		border-radius: 12rpx;
	}
</style>
